<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '导航',
  },
}
</route>

<template>
  <view class="">
    <wd-gap bg-color="#FFFFFF"></wd-gap>
    <wd-grid bg-color="rgba(0, 0, 0, 0.02)">
      <template v-for="(item, index) in gridList" :key="index">
        <wd-grid-item use-icon-slot :text="item.text" :url="item.url" icon-size="36px">
          <template #icon>
            <image class="slot-img" :src="item.image" />
          </template>
        </wd-grid-item>
      </template>
    </wd-grid>
  </view>
</template>

<script lang="ts" setup>
interface GridItem {
  image: string
  text: string
  url: string
}

const gridList: Array<GridItem> = [
  {
    image: 'http://localhost:8084/api/static/nav01.png',
    text: '日常资讯',
    url: '/pages/index/index',
  },
  {
    image: 'http://localhost:8084/api/static/nav02.png',
    text: '我的收藏',
    url: '/pages/index/index',
  },
  {
    image: 'http://localhost:8084/api/static/nav03.png',
    text: '个人设置',
    url: '/pages/index/index',
  },
  {
    image: 'http://localhost:8084/api/static/nav04.png',
    text: '联系客服',
    url: '/pages/index/index',
  },
  {
    image: 'http://localhost:8084/api/static/nav05.png',
    text: '关于我们',
    url: '/pages/index/index',
  },
]
</script>

<style lang="scss" scoped>
//
.slot-img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
</style>
